.nav.accueil {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 20px;
            background-color: #97e0f4;
            border-radius: 10px 10px 0 0;
        }
.nav.accueil a {
            color: #444;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-family: Arial, sans-serif;
            background-color: #AAA;
            transition: background-color 0.3s;
        }
.nav.accueil a:hover {
            background-color:#d4f7b3;
            color: #011A1E;
            font-weight: bold;
        }
.nav.accueil a.active {
            background-color: #007bff;
            color: white;
            font-weight: bold;
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.7);
        }
.dropdown {
  position: relative; /* ancre le menu */
  display: inline-block;
}

.menu {
  position: absolute;
  top: calc(100% + 15px); /* juste en dessous du bouton */
  left: 0;
  width: 260px;
  display: grid;
  border: solid #0056cc;
  border-radius: 10px;
  align-items:  center;
  background-color: #97e0f4;

  /* caché par défaut */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);

  /* animation douce */
  transition: opacity 0.28s, transform 0.28s, visibility 0.28s;
}

/* au survol → afficher le menu */
.dropdown:hover .menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.menu a{
  background-color: transparent;
}
.dropdown a.active{
  padding: 8px;
}